<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button>删除</button>
    <button data-action="add">添加</button>

    <div id="addDialog" style="display: none">
      <form name="addForm">
        <fieldset>
          <legend>添加</legend>
          <p>姓名 <input type="text" name="name" /></p>
          <p>年龄 <input type="text" name="age" /></p>
          <p>手机 <input type="text" name="phone" /></p>
          <p>邮箱 <input type="text" name="email" /></p>
          <p>
            性别 <input type="radio" name="gender" value="1" checked /> 男
            <input type="radio" name="gender" value="2" />女
          </p>
          <p>
            <button type="button" data-action="addSave">保存</button>
            <button type="button" data-action="addCancel">取消</button>
          </p>
        </fieldset>
      </form>
    </div>

    <div id="editDialog" style="display: none">
      <form name="editForm">
        <fieldset>
          <legend>编辑</legend>
          <input hidden type="text" name="id" />
          <p>姓名 <input type="text" name="name" /></p>
          <p>年龄 <input type="text" name="age" /></p>
          <p>手机 <input type="text" name="phone" /></p>
          <p>邮箱 <input type="text" name="email" /></p>
          <p>
            性别 <input type="radio" name="gender" value="1" checked /> 男
            <input type="radio" name="gender" value="2" />女
          </p>
          <p>
            <button type="button" data-action="editSave">保存</button>
            <button type="button" data-action="editCancel">取消</button>
          </p>
        </fieldset>
      </form>
    </div>
    <table border="1">
      <thead>
        <tr>
          <th><input type="checkbox" /></th>
          <th>编号</th>
          <th>姓名</th>
          <th>性别</th>
          <th>年龄</th>
          <th>邮箱</th>
          <th>手机</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody id="tbody"></tbody>
    </table>
    <script>
      const addDialog = document.getElementById("addDialog");
      const editDialog = document.getElementById("editDialog");
      const addForm = document.addForm;
      const editForm = document.editForm;
      const id = () => Math.ceil(Math.random() * 10000);
      const users = [
        {
          id: id(),
          name: "jack",
          age: 20,
          gender: "1",
          email: "jack@qq.com",
          phone: "1818865444",
        },
        {
          id: id(),
          name: "lili",
          age: 20,
          gender: "1",
          email: "jack@qq.com",
          phone: "1818865444",
        },
        {
          id: id(),
          name: "lucy",
          age: 20,
          gender: "1",
          email: "jack@qq.com",
          phone: "1818865444",
        },
      ];

      // 将"数组/对象"数据转成"表格行"字符串
      function render(data) {
        return data
          .map(
            (el) => `
            <tr>
                <td><input type="checkbox" /></td>
                <td>${el.id}</td>
                <td>${el.name}</td>
                <td>${el.gender}</td>
                <td>${el.age}</td>
                <td>${el.email}</td>
                <td>${el.phone}</td>
                <td>
                  <button data-action="edit" data-id="${el.id}">编辑</button>
                  <button data-action="remove" data-id="${el.id}">删除</button>
                </td>

            </tr>
            `
          )
          .join("");
      }

      tbody.innerHTML = render(users);

      document.onclick = function (e) {
        const action = e.target.dataset.action;
        if (action === "editSave") {
          // 1. 获取表单元素值
          const name = editForm.name.value;
          const email = editForm.email.value;
          const phone = editForm.phone.value;
          const gender = editForm.gender.value;
          const age = editForm.age.value;
          const id = editForm.id.value;
          // 2. 根据id获取要修改的对象
          const row = users.find((el) => el.id === +id);
          // 3. 修改对象内容为表单值
          row.name = name;
          row.age = age;
          row.gender = gender;
          row.phone = phone;
          row.email = email;

          // 4. 重新渲染数据到html
          tbody.innerHTML = render(users);

          // 5. 关闭对话框
          editDialog.style.display = "none";
        }

        if (action === "edit") {
          //显示编辑对话框
          editDialog.style.display = "";
          // 获取数据 根据ID 获取 users 数据
          const id = e.target.dataset.id;
          const row = users.find((el) => el.id === +id);
          // 回填数据
          editForm.name.value = row.name;
          editForm.phone.value = row.phone;
          editForm.email.value = row.email;
          editForm.age.value = row.age;
          editForm.gender.value = row.gender;
          editForm.id.value = row.id;
        }

        if (action === "editCancel") {
          //隐藏添加对话框
          editDialog.style.display = "none";
        }

        if (action === "addSave") {
          // 添加用户 users
          // 1. 获取表单元素值
          const name = addForm.name.value;
          const email = addForm.email.value;
          const phone = addForm.phone.value;
          const gender = addForm.gender.value;
          const age = addForm.age.value;
          // 2. push 到 users 数组
          users.push({
            id: id(),
            name,
            age,
            gender,
            email,
            phone,
          });
          //3. 重新渲染数据到html
          tbody.innerHTML = render(users);

          // 4. 关闭对话框
          addDialog.style.display = "none";
        }
        if (action === "add") {
          //显示添加对话框
          addDialog.style.display = "";
        }

        if (action === "addCancel") {
          //隐藏添加对话框
          addDialog.style.display = "none";
        }

        if (action === "remove") {
          // 删除提示
          if (confirm("确定删除？") === false) return;
          /*
            删除
            1. 删除谁：获取当前数据的ID
            2. 同步界面，数据（users）发生变化，视图也要一起发生变化（table）
            */
          // 获取数据的id
          let id = e.target.dataset.id;
          // 获取索引
          let index = users.findIndex((el) => el.id === id);
          // 删除数据
          users.splice(index, 1);
          // 重新渲染
          tbody.innerHTML = render(users);
        }
      };
    </script>
  </body>
</html>
